<template>
  <div class="search-bar">
    <el-input
      v-model="searchText"
      placeholder="搜索商品名称、描述或分类..."
      size="large"
      @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button 
          type="primary" 
          :icon="Search" 
          @click="handleSearch"
        >
          搜索
        </el-button>
      </template>
    </el-input>
    
    <div class="search-tags">
      <el-tag
        v-for="tag in popularTags"
        :key="tag"
        type="info"
        class="tag"
        @click="searchByTag(tag)"
      >
        {{ tag }}
      </el-tag>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchText = ref('')
const emit = defineEmits(['search'])

const popularTags = ['全部','电子产品','服装鞋包','图书文具','家居生活','其他']

const handleSearch = () => {
  if (searchText.value.trim()) {
    emit('search', searchText.value.trim())
  }
}

const searchByTag = (tag) => {
  searchText.value = tag
  handleSearch()
}
</script>

<style scoped>
.search-bar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

:deep(.el-input-group__append) {
  background-color: #409EFF;
}

:deep(.el-input-group__append .el-button) {
  color: white;
}

.search-tags {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tag {
  cursor: pointer;
  transition: all 0.3s;
}

.tag:hover {
  background-color: #409EFF;
  color: white;
  transform: translateY(-2px);
}
</style>